<template>
  <div>
     <fundation-header :title="'购买'"></fundation-header>
    <div class="main">
      <div class="confirmTitle">
        <span>{{fundationInfo.companyName}}</span>
        <p>{{fundationInfo.proMoney}}元</p>
      </div>
    </div>
    <div class="tipTitle"><p>确认信息</p></div>
    <div>
      <group gutter="0">
        <cell  class="confirmcell" title="买入产品" :value="fundationInfo.proName" />
        <cell class="confirmcell" title="确认金额" :value="fundationInfo.proMoney"/>
        <cell class="confirmcell" title="确认份额" :value="fundationInfo.proNum" />
        <cell class="confirmcell" title="确认净值" :value="fundationInfo.proValue" />
        <cell class="confirmcell" title="手续费"   :value="fundationInfo.serviceCost" />
        <cell class="confirmcell" title="付款账号" :value="fundationInfo.cardNum" />
        <cell class="confirmcell" title="买入时间" :value="fundationInfo.buyTime" />
        <cell class="confirmcell" title="订单号"   :value="fundationInfo.orderNum" />
      </group>
    </div>
    <div>
      <x-button @click.native="confirmAction" plain type="primary" class="confirmBtn">确认</x-button>
    </div>

  </div>
</template>
<script>
import { Cell, Group } from 'vux'
import FundationHeader from './fundationHeader'
export default {

  components: {
    Cell,
    Group,
    FundationHeader
  },
  data () {
    return {
      fundationInfo: {
        companyName: '国泰基金管理有限公司',
        proName: '国泰民安增利债券型发起式C',
        proMoney: '5000',
        proNum: '4999.88',
        proValue: '1.0043',
        serviceCost: '3.000',
        cardNum: '6214*******9999',
        buyTime: '20180908',
        orderNum: '208747748475885755'
      }
    }
  },
  methods: {
    confirmAction () {
      console.log('确认按钮')
      this.$router.push({name: 'fundationResult'})
    }
  }
}
</script>

<style lang="less" scoped>
    .weui-cell::before{
      border-top: 0px ;
    }
    .weui-cell:last-child::before{
        border-top: 1px solid #D9D9D9;
    }
    .weui-cell {
      padding-top: 0.3rem;
      padding-bottom: 0rem;
      font-size: 0.28rem;
      line-height: 0.28rem;
      &:last-child{
        padding-bottom:0.3rem;
      }
      &:first-child{
        padding-top: 0.44rem;
      }
      &:nth-last-child(2){
        padding-bottom:0.44rem;
      }
    }
    .confirmBtn{
      line-height:0.88rem;
      width:6.9rem;
      margin-left: 0.3rem;
      margin-top: 0.49rem;
      background: #EC1B30;
      font-size: 0.3rem;
      border-radius: 0.06rem;
      color: white;
      border-width: 0rem;
      &.forbiden{
        opacity: .5;
      }
    }
    .confirmcell{
      font-size: 0.26rem;
      color: #333;
   }
   .confirmTitle{
     height: 1.92rem;
     background: #3D477B;
     color: white;
     span{
        display: inline-block;
        margin: 0.4rem 0 0 0.31rem;
        font-size: 0.27rem;
     }
     p{
        text-align: center;
        font-size: 0.6rem;
        margin-top: 0.32rem;
        line-height: 0.6rem;
        font-family:PingFangSC-Medium;
     }
   }
   .tipTitle{
      height: 0.6rem;
      line-height: 0.6rem;
      padding-left: 0.28rem;
      font-size: 0.3rem;
      font-family: PingFangSC-Medium;
      color: rgba(51,51,51,1);
   }
</style>
